<template>
  <view class="">
    <base-header />
    <view class="p-12">
      <view class="px-12 bg-white rounded-6">
        <view class="text-20 leading-32 py-10 hair--b">{{ detail.name }}</view>
        <view class="">
          <mp-html lazy-load :content="detail.content" />
        </view>
      </view>
    </view>
    <view class="bottom-bar">
      <view class="bottom-fixed flex-ba shadow-t px-16">
        <view class="flex-a text-center">
          <view class="" @click="onCollection">
            <view class="iconfont text-20" :class="detail.is_collection ? 'icon-favorfill' : 'icon-favor'" />
            <view class="text-10">收藏</view>
          </view>
					
          <view v-if="!$f.isH5()" class="share-box ml-25">
            <view class="iconfont icon-share text-20" />
            <view class="text-10">分享</view>
            <button class="share-btn" open-type="share" />
          </view>
          <view v-else class="ml-25" @click="onShare">
            <view class="iconfont icon-share text-20" />
            <view class="text-10">分享</view>
          </view>
        </view>
        <view class="">
          <button type="primary" class="round" @click="onDownload">下载文档</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { APP_BASE_URL } from '@/env.js'
export default {
  components: {},
  data() {
    return {
      detail: {}
    }
  },
  computed: {
    token() {
      return this.$store.state.token
    }
  },
  onLoad(options = {}) {
    const id = Number(options.id)
    this.getDetail(id)
  },
  onShareAppMessage() {
    return this.$f.wxShare()
  },
  onShareTimeline() {
    return this.$f.wxShare()
  },
  methods: {
    getDetail(id) {
      this.$f.post('api/fileInfo', { id }).then(res => {
        this.detail = res.data
      })
    },
    onDownload() {
      if (!this.$f.checkLogin()) {
        return
      }
      if (this.detail.is_download) {
        const url = `${APP_BASE_URL}common/fileDownload?file_id=${this.detail.id}&token=${this.token}`
        this.$f.copy(url)
      } else if (this.detail.goods_id) {
        this.$Router.push('/pages/detail/goods?id=' + this.detail.goods_id)
      }
    },
    onShare() {
      if (this.$f.checkLogin()) {
        const url = this.$f.getShareLink()
        this.$f.copy(url)
      }
    },
    onCollection() {
      if (this.$f.checkLogin()) {
        this.$f.post('common/collection', { object_id: this.detail.id, type: 2 }).then(res => {
				  this.$f.toast(res.msg)
				  if (res.code === 0) {
				    this.detail.is_collection = this.detail.is_collection ? 0 : 1
				  }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.rich-text {
	img {
		display: inline-block;
		max-width: 100%;
		font-size: 0;
	}
}
.icon-favorfill {
	color: #FFD600;
}
.bottom-bar {
	height: 108rpx;
}
.bottom-fixed {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 108rpx;
	box-sizing: border-box;
	background-color: #fff;
	.iconfont {
		font-size: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin-bottom: 4rpx;
	}
}
.share-box {
	position: relative;
}
.share-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 100;
}
</style>
